<template>
  <div class="pan-nav-content-wrapper">
    <div class="pan-nav-content">
      <div class="logo">
        <img src="@/assets/imgs/logo.svg" alt="" />{{ logo }}
      </div>
      <ul class="pan-nav-file">
        <li class="pan-nav-file-all">
          <a
            @click="change('Files')"
            :class="{ checked: active === 'Files' }"
            href="javascript:void(0);"
          >
            <span class="text">
              <span class="icon el-icon-document-copy" />
              <span>我的文件</span>
            </span>
          </a>
        </li>
        <ul>
          <li class="pan-nav-file-pic">
            <a
              @click="change('Imgs')"
              :class="{ checked: active === 'Imgs' }"
              href="javascript:void(0);"
            >
              <span class="text">
                <span class="icon iconfont icon-tupian" />
                <span>图片</span>
              </span>
            </a>
          </li>
          <li class="pan-nav-file-doc">
            <a
              @click="change('Docs')"
              :class="{ checked: active === 'Docs' }"
              href="javascript:void(0);"
            >
              <span class="text">
                <span class="icon el-icon-document" />
                <span>文档</span>
              </span>
            </a>
          </li>
          <li class="pan-nav-file-video">
            <a
              @click="change('Videos')"
              :class="{ checked: active === 'Videos' }"
              href="javascript:void(0);"
            >
              <span class="text">
                <span class="icon iconfont icon-shipin" />
                <span>视频</span>
              </span>
            </a>
          </li>
          <li class="pan-nav-file-music">
            <a
              @click="change('Musics')"
              :class="{ checked: active === 'Musics' }"
              href="javascript:void(0);"
            >
              <span class="text">
                <span class="icon iconfont icon-yinle" />
                <span>音乐</span>
              </span>
            </a>
          </li>
          <li class="pan-nav-file-music">
            <a
              @click="change('Other')"
              :class="{ checked: active === 'Other' }"
              href="javascript:void(0);"
            >
              <span class="text">
                <span class="icon iconfont icon-qitawenjianbeifen" />
                <span>其他</span>
              </span>
            </a>
          </li>
        </ul>
      </ul>

      <ul class="pan-nav-share">
        <li class="pan-nav-share-li">
          <a
            @click="change('Shares')"
            :class="{ checked: active === 'Shares' }"
            href="javascript:void(0);"
          >
            <span class="text">
              <span class="icon el-icon-share" />
              <span>我的分享</span>
            </span>
          </a>
        </li>
      </ul>
      <ul class="pan-nav-recycle">
        <li class="pan-nav-recycle-li">
          <a
            @click="change('Recycles')"
            :class="{ checked: active === 'Recycles' }"
            href="javascript:void(0);"
          >
            <span class="text">
              <span class="icon el-icon-delete" />
              <span>回收站</span>
            </span>
          </a>
        </li>
      </ul>
      <!-- <div class="space">
        <div class="title">空间使用情况：</div>
        <el-progress
          color="#409EFF"
          :percentage="
            userSpace + spaceSize === 0
              ? 0
              : (userSpace / (userSpace + spaceSize)).toFixed(2) * 100
          "
        />
      </div> -->
      <div class="pan-user-info-content">
        <pan-user-info />
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapGetters, mapActions } from 'vuex'
import PanUserInfo from '@/components/user-info/index.vue'
export default {
  name: 'PanNavbar',
  components: {
    PanUserInfo,
  },
  props: [],
  data() {
    return {
      logo: import.meta.env.VITE_TITLE,
    }
  },
  methods: {
    ...mapMutations({
      change: 'navbar/changeNavBar',
    }),
    init() {
      let name = this.$route.name
      if (name === 'Index') {
        this.change('Files')
      } else {
        this.change(name)
      }
    },
  },
  computed: {
    ...mapGetters(['active', 'username', 'userSpace', 'spaceSize']),
  },
  mounted() {
    this.init()
  },
  watch: {},
}
</script>
<style lang="scss" scoped>
// .checked span {
//   color: #09aaff;
// }

// ul {
//   list-style: none;
//   padding-inline-start: 0px;
//   display: block;
//   padding: 0 15px;
//   ul {
//     padding-left: 28px;
//   }
// }

// li {
//   display: list-item;
//   text-align: -webkit-match-parent;
//   list-style: none;
// }

.pan-content {
  .pan-nav-content-wrapper {
    background-color: #fff;
    .pan-nav-content {
      width: 194px;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 9;
      position: absolute;

      .logo {
        height: 46px;
        line-height: 46px;
        padding-left: 25px;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        img {
          display: block;
          height: 24px;
          margin-right: 10px;
        }
      }
      ul {
        list-style: none;
        padding-inline-start: 0px;
        display: block;
        padding: 0 15px;
        li {
          display: list-item;
          text-align: -webkit-match-parent;
          list-style: none;
          a {
            height: 38px;
            display: block;
            position: relative;

            border-radius: 5px;
            // padding: 0 0 0 15px;
            font-size: 14px;
            text-decoration: none;
            zoom: 1;
            .icon {
              font-weight: bold;
              font-size: 16px;
              // position: absolute;
              top: 12px;
              left: 10px;
              cursor: pointer;
              width: 38px;
              text-align: center;
            }
            .text {
              color: #636d7e;
              font-weight: bold;
              font-size: 14px;
              cursor: pointer;
              height: 38px;
              // line-height: 38px;
              position: relative;
              display: flex;
              align-items: center;
              width: 115px;
              padding-left: 0;
              span {
                line-height: 1em;
              }
            }
            &:hover {
              background: rgba(0, 0, 0, 0.05);
            }
            &.checked {
              background: rgba(0, 0, 0, 0.05);
              span {
                color: #09aaff;
              }
            }
          }
        }

        ul {
          padding: 0;
          li {
            a {
              padding-left: 27px;
            }
          }
        }
      }

      .pan-user-info-content {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        height: 60px;
        line-height: 60px;
        text-align: center;
      }

      .space {
        position: absolute;
        width: calc(100% - 20px);
        left: 0;
        bottom: 60px;
        padding: 20px 0 20px 20px;
        .title {
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>
